<template>
  <view class="ten-draw">
    <view class="ten-draw-top">
      <!-- ////////// -->
      <!-- {{ hasClick }}{{ orderId }} -->
      <!-- {{ secondShow }} -->
      <view
        @click="cankhBool && !hasClick ? cardClick(index + 1) : ''"
        class="card-item"
        v-for="(item, index) in newhaveDraw.slice(1, 4)"
        :key="index"
        style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
      >
        <view
          v-if="item.img || item.clicked"
          class="card-front"
          style="width: 200rpx; height: 230rpx; border-radius: 8rpx"
          :class="{
            'orange-bg': item.rule_id == 1,
            'pink-bg': item.rule_id == 2,
            'blue-bg': item.rule_id == 3,
            'white-bg': item.rule_id == 4,
            'orange-sho': item.rule_id == 1 && item.double,
            'pink-sho': item.rule_id == 2 && item.double,
            'blue-sho': item.rule_id == 3 && item.double,
            'white-sho': item.rule_id == 4 && item.double,
            'second-rotate-content':
              !cankhBool || item.clicked ? secondShow : false,
          }"
        >
          <view class="double_box" v-if="item.double"> 双倍 </view>
          <image class="card-content" :src="item.img" mode="widthFix"></image>
          <view
            v-if="item.rule_id == 1 || item.rule_id == 2 || item.rule_id == 3"
            class="left-top"
            :class="{
              'chuan-shuo': item.rule_id == 1,
              'xi-you': item.rule_id == 2,
              normal: item.rule_id == 3,
            }"
          >
          </view>
        </view>
        <!--   <view
          :class="{
            'card-bg': !cankhBool,
            'card-bg2': cankhBool,
            'second-rotate-bg': !cankhBool || item.clicked ? secondShow : false,
          }"
        >
        </view> -->
        <image
          v-if="!item.hideBg"
          class="card-bg"
          :class="{
            'second-rotate-bg': !cankhBool || item.clicked ? secondShow : false,
          }"
          style="width: 200rpx; height: 230rpx"
          :style="{ 'z-index': cankhBool && !item.clicked ? '100' : '' }"
          :src="`${
            cankhBool
              ? 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg2.png'
              : 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png'
          }`"
        ></image>
      </view>
      <!-- 1111///////////////// -->
    </view>
    <view class="ten-draw-center">
      <!-- ////////// -->
      <view
        @click="cankhBool ? cardClick(0) : ''"
        class="card-item"
        v-for="(item, index) in newhaveDraw.slice(0, 1)"
        :key="index"
        style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
      >
        <view
          v-if="item.img || item.clicked"
          class="card-front"
          style="width: 200rpx; height: 230rpx; border-radius: 8rpx"
          :class="{
            'orange-bg': item.rule_id == 1,
            'pink-bg': item.rule_id == 2,
            'blue-bg': item.rule_id == 3,
            'white-bg': item.rule_id == 4,
            'orange-sho': item.rule_id == 1 && item.double,
            'pink-sho': item.rule_id == 2 && item.double,
            'blue-sho': item.rule_id == 3 && item.double,
            'white-sho': item.rule_id == 4 && item.double,
            'second-rotate-content':
              !cankhBool || item.clicked ? secondShow : false,
          }"
        >
          <view class="double_box" v-if="item.double"> 双倍 </view>
          <image class="card-content" :src="item.img" mode="widthFix"></image>
          <view
            v-if="item.rule_id == 1 || item.rule_id == 2 || item.rule_id == 3"
            class="left-top"
            :class="{
              'chuan-shuo': item.rule_id == 1,
              'xi-you': item.rule_id == 2,
              normal: item.rule_id == 3,
            }"
          >
          </view>
        </view>
        <image
          v-if="!item.hideBg"
          class="card-bg"
          :class="{
            'second-rotate-bg': !cankhBool || item.clicked ? secondShow : false,
          }"
          style="width: 200rpx; height: 230rpx"
          :style="{ 'z-index': cankhBool && !item.clicked ? '100' : '' }"
          :src="`${
            cankhBool
              ? 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg2.png'
              : 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png'
          }`"
        ></image>
      </view>
      <view
        @click="cankhBool ? cardClick(index + 4) : ''"
        class="card-item"
        v-for="(item, index) in newhaveDraw.slice(4, 7)"
        :key="index"
        style="
          width: 200rpx;
          height: 230rpx;
          margin-bottom: 45rpx;
          border-radius: 8rpx;
        "
      >
        <view
          v-if="item.img || item.clicked"
          class="card-front"
          style="width: 200rpx; height: 230rpx; border-radius: 8rpx"
          :class="{
            'orange-bg': item.rule_id == 1,
            'pink-bg': item.rule_id == 2,
            'blue-bg': item.rule_id == 3,
            'white-bg': item.rule_id == 4,
            'orange-sho': item.rule_id == 1 && item.double,
            'pink-sho': item.rule_id == 2 && item.double,
            'blue-sho': item.rule_id == 3 && item.double,
            'white-sho': item.rule_id == 4 && item.double,
            'second-rotate-content':
              !cankhBool || item.clicked ? secondShow : false,
          }"
        >
          <view class="double_box" v-if="item.double"> 双倍 </view>
          <image class="card-content" :src="item.img" mode="widthFix"></image>
          <view
            v-if="item.rule_id == 1 || item.rule_id == 2 || item.rule_id == 3"
            class="left-top"
            :class="{
              'chuan-shuo': item.rule_id == 1,
              'xi-you': item.rule_id == 2,
              normal: item.rule_id == 3,
            }"
          >
          </view>
        </view>
        <image
          v-if="!item.hideBg"
          class="card-bg"
          :class="{
            'second-rotate-bg': !cankhBool || item.clicked ? secondShow : false,
          }"
          style="width: 200rpx; height: 230rpx"
          :style="{ 'z-index': cankhBool && !item.clicked ? '100' : '' }"
          :src="`${
            cankhBool
              ? 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg2.png'
              : 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png'
          }`"
        ></image>
      </view>
      <!-- 1111///////////////// -->
    </view>
    <view class="ten-draw-bottom">
      <!-- ////////// -->
      <view
        @click="cankhBool ? cardClick(index + 7) : ''"
        class="card-item"
        v-for="(item, index) in newhaveDraw.slice(7, 10)"
        :key="index"
        style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
      >
        <view
          v-if="item.img || item.clicked"
          class="card-front"
          style="width: 200rpx; height: 230rpx; border-radius: 8rpx"
          :class="{
            'orange-bg': item.rule_id == 1,
            'pink-bg': item.rule_id == 2,
            'blue-bg': item.rule_id == 3,
            'white-bg': item.rule_id == 4,
            'orange-sho': item.rule_id == 1 && item.double,
            'pink-sho': item.rule_id == 2 && item.double,
            'blue-sho': item.rule_id == 3 && item.double,
            'white-sho': item.rule_id == 4 && item.double,
            'second-rotate-content':
              !cankhBool || item.clicked ? secondShow : false,
          }"
        >
          <view class="double_box" v-if="item.double"> 双倍 </view>
          <image class="card-content" :src="item.img" mode="widthFix"></image>
          <view
            v-if="item.rule_id == 1 || item.rule_id == 2 || item.rule_id == 3"
            class="left-top"
            :class="{
              'chuan-shuo': item.rule_id == 1,
              'xi-you': item.rule_id == 2,
              normal: item.rule_id == 3,
            }"
          >
          </view>
        </view>
        <!--  <view
          :class="{
            'card-bg': !cankhBool,
            'card-bg2': cankhBool,
            'second-rotate-bg': !cankhBool || item.clicked ? secondShow : false,
          }"
          style="width: 200rpx; height: 230rpx"
          :style="{ 'z-index': cankhBool && !item.clicked ? '100' : '' }"
        >
        </view> -->
        <image
          v-if="!item.hideBg"
          class="card-bg"
          :class="{
            'second-rotate-bg': !cankhBool || item.clicked ? secondShow : false,
          }"
          style="width: 200rpx; height: 230rpx"
          :style="{ 'z-index': cankhBool && !item.clicked ? '100' : '' }"
          :src="`${
            cankhBool
              ? 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg2.png'
              : 'https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png'
          }`"
        ></image>
      </view>
    </view>
    <!-- 1111删除 -->
  </view>
</template>
<script>
  // /
  import Api from '../api/index.js'
  const __Api = new Api()
  import dayjs from 'dayjs'
  export default {
    props: {
      haveDraw: {
        type: Array,
      },
      secondShow: {
        type: Boolean,
        default: false,
      },
      is_flip: {
        // 是否双倍
        type: Object,
        default: () => {},
      },
      orderId: {
        type: Number,
      },
    },
    created() {
      clearTimeout(this.timer1)
      clearTimeout(this.timer2)
      if (this.is_flip == 1) {
        this.newhaveDraw = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        this.$forceUpdate()
      } else {
        this.newhaveDraw = this.haveDraw
      }
    },
    watch: {
      orderId: {
        handler(val, old) {
          console.log(123)
          clearTimeout(this.timer1)
          clearTimeout(this.timer2)
          if (this.is_flip == 1) {
            this.newhaveDraw = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
            this.$forceUpdate()
          } else {
            this.newhaveDraw = this.haveDraw
          }
        },
      },
      secondShow: {
        handler(val, old) {
          this.hasClick = false
        },
      },
      haveDraw: {
        deep: true,
        handler(val, old) {},
        immediate: true,
      },
    },
    computed: {
      cankhBool() {
        return this.is_flip == 1 ? true : false //1可狂欢
      },
    },
    data() {
      return {
        hasClick: false,
        newhaveDraw: [],
        newkh_info: null,
        timer1: null,
        timer2: null,
      }
    },
    onLaunch: function () {
      console.log('App Launch')
    },
    onShow: function () {
      console.log('App Show')
    },
    onHide: function () {
      console.log('App Hide')
    },
    methods: {
      cardClick(index) {
        if (!this.hasClick) {
          this.clickIndex = index
          this.hasClick = true

          __Api.flipPost({ id: this.orderId, sort: index }).then((res) => {
            this.$emit('canClickFun')
            this.newhaveDraw = res.data
            this.newhaveDraw[index].clicked = true
            this.newhaveDraw[index].double = true
          })

          this.timer1 = setTimeout(() => {
            this.newhaveDraw = this.newhaveDraw.map((res) => {
              return Object.assign({}, res, {
                clicked: true,
              })
            })
          }, 1000)
          this.timer2 = setTimeout(() => {
            this.newhaveDraw = this.newhaveDraw.map((res) => {
              return Object.assign({}, res, {
                hideBg: true,
              })
            })
          }, 2000)
        }
      },
    },
  }
</script>
<style lang="scss">
  .double_box {
    width: 58rpx;
    height: 28rpx;
    text-align: center;
    line-height: 28rpx;
    background: #fdef9e;
    position: absolute;
    right: 8rpx;
    top: 6rpx;
    font-size: 14rpx;
    border-radius: 8rpx;
  }
  .ten-draw {
    // position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ten-draw-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 15rpx;
    }
    .ten-draw-center {
      margin-right: 15rpx;
    }
    .ten-draw-bottom {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .card-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .card-front {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 220rpx;
        height: 270rpx;
        z-index: 1;
        backface-visibility: hidden;
        // animation: rotateOnce 2s ease-out forwards;
      }
      .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(1.05);
        // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
        //   no-repeat;
        // background-size: cover;
      }
      .card-bg2 {
        position: absolute;
        top: 0;
        left: 0;
        // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg2.png')
        //   no-repeat;
        // background-size: 100% 100%;
      }
      .card-content {
        position: absolute;
        // top: 0;
        // left: 0;
        z-index: 2;
        backface-visibility: hidden;
        width: 165rpx;
        height: auto;
        // animation: rotateOnce 2s ease-out forwards;
      }
      .left-top {
        // display: none;
        opacity: 0;
        position: absolute;
        top: -35rpx;
        left: -23rpx;
        z-index: 3;
        width: 110rpx;
        height: 110rpx;
        // animation: displayTop 2s ease-out forwards 2s;
      }
    }
  }
  .orange-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/orange-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .pink-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/pink-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .blue-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/blue-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .white-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/white-bg2.png')
      no-repeat;
    background-size: cover;
  }
  // .orange-bg {
  //   background-image: linear-gradient(#fad06c, #f0f6ec); /* 默认方向自下向上 */
  // }
  // .pink-bg {
  //   background-image: linear-gradient(#fb5efa, #f0f6ec); /* 默认方向自下向上 */
  // }
  // .blue-bg {
  //   background-image: linear-gradient(#c187fd, #f0f6ec); /* 默认方向自下向上 */
  // }
  // .white-bg {
  //   background-image: linear-gradient(#96e8f9, #f0f6ec); /* 默认方向自下向上 */
  // }

  .orange-sho {
    box-shadow: 0upx 10upx 30upx 0upx #fad16d;
    -webkit-animation: tada 1s 0.2s ease both;
    -moz-animation: tada 1s 0.2s ease both;
    //
  }
  .pink-sho {
    box-shadow: 0upx 10upx 30upx 0upx #fc79f7;
    -webkit-animation: tada 1s 0.2s ease both;
    -moz-animation: tada 1s 0.2s ease both;
    // #FC79F7
  }
  .blue-sho {
    box-shadow: 0upx 10upx 30upx 0upx #c997fa;
    -webkit-animation: tada 1s 0.2s ease both;
    -moz-animation: tada 1s 0.2s ease both;
    // #C997FA
  }
  .white-sho {
    box-shadow: 0upx 10upx 30upx 0upx #8de4f6;
    -webkit-animation: tada 1s 0.2s ease both;
    -moz-animation: tada 1s 0.2s ease both;
    //
  }
  @-webkit-keyframes tada {
    0% {
      -webkit-transform: scale(1);
    }
    10%,
    20% {
      -webkit-transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale(1.1) rotate(-3deg);
    }
    100% {
      -webkit-transform: scale(1) rotate(0);
    }
  }
  @-moz-keyframes tada {
    0% {
      -moz-transform: scale(1);
    }
    10%,
    20% {
      -moz-transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
      -moz-transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
      -moz-transform: scale(1.1) rotate(-3deg);
    }
    100% {
      -moz-transform: scale(1) rotate(0);
    }
  }
  // 卡牌左上角
  .top-left-purple {
    background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/icon_b.png')
      no-repeat;
    background-size: contain;
  }
  .top-left-pink {
    background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/icon_a.png')
      no-repeat;
    background-size: contain;
  }
  // 传说
  .chuan-shuo {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SSR.png')no-repeat;
    background-size: contain;
  }
  // 稀有
  .xi-you {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SR.png')no-repeat;
    background-size: contain;
  }
  // 普通
  .normal {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/R.png')no-repeat;
    background-size: contain;
  }
  //重复动画
  .second-rotate-content {
    animation: rotateOnce 0.8s ease-out forwards;
  }
  .second-rotate-bg {
    animation: rotateBg 0.8s ease-out forwards;
  }
  .second-top-display {
    animation: displayTop 1.2s ease-out forwards 1.5s;
  }
  /* 定义旋转动画 */
  @keyframes rotateOnce {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes rotateBg {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
</style>
